<template>
  <div class="product-list">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2>商品管理</h2>
      <p>管理系统中的所有商品信息</p>
    </div>
    
    <div class="content-wrapper">
      <!-- 搜索和操作栏 -->
      <div class="search-action-bar">
        <div class="search-box">
          <input 
            type="text" 
            placeholder="搜索商品名称、品牌、编号..." 
            v-model="searchQuery"
            @keyup.enter="searchProducts"
            class="search-input"
          >
          <button @click="searchProducts" class="search-btn">
            <i class="fas fa-search"></i>
          </button>
        </div>
        
        <div class="filter-controls">
          <select 
            v-model="statusFilter" 
            class="filter-select"
            style="color: #374151 !important; background-color: white !important;"
          >
            <option value="" style="color: #9CA3AF;">全部状态</option>
            <option value="1" style="color: #374151; background-color: white;">上架</option>
            <option value="0" style="color: #374151; background-color: white;">下架</option>
          </select>
          
          <select 
            v-model="brandFilter" 
            class="filter-select"
            style="color: #374151 !important; background-color: white !important;"
          >
            <option value="" style="color: #9CA3AF;">全部品牌</option>
            <option 
              v-for="brand in brands" 
              :key="brand.brand_id" 
              :value="brand.brand_id"
              style="color: #374151; background-color: white;"
            >
              {{ brand.brand_name }}
            </option>
          </select>
        </div>
        
        <button class="create-btn" @click="addProduct">
          <i class="fas fa-plus"></i>
          添加商品
        </button>
      </div>
      
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner"></div>
        <p>正在加载商品数据...</p>
      </div>
      
      <!-- 空状态 -->
      <div v-else-if="filteredProducts.length === 0" class="empty-state">
        <div class="empty-icon">📦</div>
        <h3>{{ searchQuery || statusFilter || brandFilter ? '没有找到匹配的商品' : '还没有添加任何商品' }}</h3>
        <p>{{ searchQuery || statusFilter || brandFilter ? '请尝试调整搜索条件或筛选器' : '点击上方按钮开始添加您的第一个商品' }}</p>
        <button class="btn btn-primary" @click="addProduct" v-if="!searchQuery && !statusFilter && !brandFilter">
          添加第一个商品
        </button>
      </div>
      
      <!-- 商品网格 -->
      <div v-else class="products-grid">
        <div 
          class="product-card" 
          v-for="product in paginatedProducts" 
          :key="product.shoeId || product.shoe_id"
          :class="{ inactive: product.status === '0' || product.status === 0 }"
        >
          <div class="card-content">
            <div class="product-info">
              <h3 class="product-title">{{ product.name }}</h3>
              <div class="product-meta">
                <span class="product-id">ID: {{ product.shoeId || product.shoe_id }}</span>
                <span class="product-status" :class="product.status === '1' || product.status === 1 ? 'status-active' : 'status-inactive'">
                  {{ product.status === '1' || product.status === 1 ? '上架' : '下架' }}
                </span>
              </div>
            </div>
            
            <div class="product-details">
              <div class="detail-row">
                <span class="label">品牌:</span>
                <span class="value">{{ product.brand?.brand_name || product.brandName || product.brand_name || '-' }}</span>
              </div>
              <div class="detail-row">
                <span class="label">价格:</span>
                <span class="value price-value">
                  <span v-if="product.discountPrice && product.discountPrice < product.price" class="discount-price">
                    <span class="original-price">¥{{ product.price }}</span>
                    <span class="current-price">¥{{ product.discountPrice || product.discount_price }}</span>
                  </span>
                  <span v-else class="current-price">¥{{ product.price }}</span>
                </span>
              </div>
              <div class="detail-row">
                <span class="label">分类:</span>
                <span class="value">{{ product.type?.typeName || product.typeName || product.type_name || '-' }}</span>
              </div>
              <div class="detail-row">
                <span class="label">颜色:</span>
                <span class="value">{{ product.color?.colorName || product.colorName || product.color_name || '-' }}</span>
              </div>
              <div class="detail-row">
                <span class="label">状态:</span>
                <span class="value" :class="product.status === '1' || product.status === 1 ? 'status-active' : 'status-inactive'">
                  {{ product.status === '1' || product.status === 1 ? '销售中' : '已下架' }}
                </span>
              </div>
              <div class="detail-row">
                <span class="label">库存:</span>
                <span class="value stock-info" :class="getProductStockClass(product)">
                  <span class="stock-text">{{ getProductStockText(product) }}</span>
                  <button 
                    class="stock-refresh-btn" 
                    @click="refreshProductStock(product)" 
                    title="刷新库存信息"
                  >
                    🔄
                  </button>
                </span>
              </div>

            </div>
            
            <div class="card-actions">
              <button class="action-btn edit" @click="editProduct(product)" title="编辑">✏️</button>
              <button 
                class="action-btn toggle" 
                @click="toggleProductStatus(product)" 
                :title="product.status === '1' || product.status === 1 ? '下架' : '上架'"
              >
                {{ product.status === '1' || product.status === 1 ? '⏸️' : '▶️' }}
              </button>
              <button class="action-btn delete" @click="deleteProduct(product)" title="删除">🗑️</button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 分页控件 -->
      <div v-if="filteredProducts.length > 0" class="pagination-wrapper">
        <div class="pagination-info">
          显示 {{ (currentPage - 1) * pageSize + 1 }} - {{ Math.min(currentPage * pageSize, filteredProducts.length) }} 
          共 {{ filteredProducts.length }} 条记录
        </div>
        <div class="pagination-controls">
          <div class="page-size-selector">
            <label>每页显示:</label>
            <select v-model="pageSize" @change="currentPage = 1">
              <option :value="12">12</option>
              <option :value="24">24</option>
              <option :value="48">48</option>
            </select>
          </div>
          <div class="pagination">
            <button 
              class="page-btn" 
              @click="currentPage = 1" 
              :disabled="currentPage === 1"
            >
              首页
            </button>
            <button 
              class="page-btn" 
              @click="currentPage--" 
              :disabled="currentPage === 1"
            >
              上一页
            </button>
            
            <span class="page-numbers">
              <template v-for="page in visiblePages">
                <button 
                  v-if="page !== '...'"
                  :key="`btn-${page}`"
                  class="page-number"
                  :class="{ active: page === currentPage }"
                  @click="currentPage = page"
                >
                  {{ page }}
                </button>
                <span v-else :key="`ellipsis-${page}`" class="page-ellipsis">...</span>
              </template>
            </span>
            
            <button 
              class="page-btn" 
              @click="currentPage++" 
              :disabled="currentPage === totalPages"
            >
              下一页
            </button>
            <button 
              class="page-btn" 
              @click="currentPage = totalPages" 
              :disabled="currentPage === totalPages"
            >
              末页
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 添加/编辑商品模态框 -->
    <div v-if="showModal" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>{{ editingProduct ? '编辑商品' : '添加商品' }}</h3>
          <div class="header-actions">
            <button 
              type="button" 
              class="refresh-btn" 
              @click="refreshSelectOptions" 
              :disabled="loading"
              title="刷新选择栏数据"
            >
              🔄
            </button>
            <button class="close-btn" @click="closeModal">&times;</button>
          </div>
        </div>
        <div class="modal-body">
          <form @submit.prevent="saveProduct">
            <div class="form-row">
              <div class="form-group">
                <label>商品名称 *</label>
                <input 
                  type="text" 
                  v-model="currentProduct.name" 
                  class="form-input"
                  required
                  placeholder="请输入商品名称"
                >
              </div>
              <div class="form-group">
                <label>商品编号</label>
                <input 
                  type="text" 
                  v-model="currentProduct.serialNumber" 
                  class="form-input"
                  placeholder="请输入商品编号"
                >
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label>品牌 *</label>
                <select v-model="currentProduct.brandId" class="form-select" required>
                  <option value="">请选择品牌</option>
                  <option v-for="brand in brands" :key="brand.brand_id || brand.brandId" :value="brand.brand_id || brand.brandId">
                    {{ brand.brand_name || brand.brandName }}
                  </option>
                </select>
              </div>
              <div class="form-group">
                <label>分类 *</label>
                <select 
                  v-model="currentProduct.typeId" 
                  class="form-select" 
                  required
                  style="color: #374151 !important; background-color: white !important;"
                >
                  <option value="" style="color: #9CA3AF;">请选择分类</option>
                  <option 
                    v-for="type in types" 
                    :key="type.type_id || type.typeId" 
                    :value="type.type_id || type.typeId"
                    :disabled="type.status === '0' || type.status === 0"
                    :style="{
                      color: (type.status === '0' || type.status === 0) ? '#9CA3AF' : '#374151',
                      backgroundColor: 'white'
                    }"
                  >
                    {{ type.type_name || type.typeName }}{{ (type.status === '0' || type.status === 0) ? ' (已禁用)' : '' }}
                  </option>
                </select>
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label>颜色 *</label>
                <select 
                  v-model="currentProduct.colorId" 
                  class="form-select" 
                  required
                  style="color: #374151 !important; background-color: white !important;"
                >
                  <option value="" style="color: #9CA3AF;">请选择颜色</option>
                  <option 
                    v-for="color in colors" 
                    :key="color.color_id || color.colorId" 
                    :value="color.color_id || color.colorId"
                    :disabled="color.status === '0' || color.status === 0"
                    :style="{
                      color: (color.status === '0' || color.status === 0) ? '#9CA3AF' : '#374151',
                      backgroundColor: 'white'
                    }"
                  >
                    {{ color.color_name || color.colorName }}{{ (color.status === '0' || color.status === 0) ? ' (已禁用)' : '' }}
                  </option>
                </select>
              </div>
              <div class="form-group">
                <label>性别</label>
                <select v-model="currentProduct.gender" class="form-select">
                  <option value="">请选择性别</option>
                  <option value="男">男</option>
                  <option value="女">女</option>
                  <option value="男女通用">男女通用</option>
                </select>
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label>价格 *</label>
                <input 
                  type="number" 
                  v-model="currentProduct.price" 
                  class="form-input"
                  step="0.01"
                  min="0"
                  required
                  placeholder="请输入价格"
                >
              </div>
              <div class="form-group">
                <label>折扣价</label>
                <input 
                  type="number" 
                  v-model="currentProduct.discountPrice" 
                  class="form-input"
                  step="0.01"
                  min="0"
                  placeholder="请输入折扣价"
                >
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label>商品积分</label>
                <input 
                  type="number" 
                  v-model="currentProduct.itemPoints" 
                  class="form-input"
                  min="0"
                  placeholder="请输入商品积分"
                >
              </div>
              <div class="form-group">
                <label>销售量</label>
                <input 
                  type="number" 
                  v-model="currentProduct.salesVolume" 
                  class="form-input"
                  min="0"
                  placeholder="请输入销售量"
                >
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label>产地</label>
                <input 
                  type="text" 
                  v-model="currentProduct.originPlace" 
                  class="form-input"
                  placeholder="请输入产地"
                >
              </div>
              <div class="form-group">
                <!-- 空白占位 -->
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label>上市日期</label>
                <input 
                  type="date" 
                  v-model="currentProduct.launchDate" 
                  class="form-input"
                >
              </div>
              <div class="form-group">
                <!-- 空白占位 -->
              </div>
            </div>
            
            <div class="form-group">
              <label>商品描述</label>
              <textarea 
                v-model="currentProduct.description" 
                class="form-textarea"
                rows="3"
                placeholder="请输入商品描述"
              ></textarea>
            </div>
            
            <div class="form-group">
              <label>详细信息</label>
              <textarea 
                v-model="currentProduct.detailedInfo" 
                class="form-textarea"
                rows="4"
                placeholder="请输入详细信息"
              ></textarea>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label>商品图片URL</label>
                <input 
                  type="url" 
                  v-model="currentProduct.productImageUrl" 
                  class="form-input"
                  placeholder="请输入图片URL"
                >
              </div>
              <div class="form-group">
                <label>状态</label>
                <select v-model="currentProduct.status" class="form-select">
                  <option value="1">上架</option>
                  <option value="0">下架</option>
                </select>
              </div>
            </div>

            <!-- 尺码库存配置 -->
            <div class="size-stock-section">
              <div class="section-header">
                <h4>尺码库存配置</h4>
                <p>为商品配置不同尺码的库存数量</p>
              </div>
              
              <!-- 批量操作按钮 -->
              <div class="stock-actions">
                <button 
                  type="button" 
                  class="stock-action-btn clear-all-btn"
                  @click="clearAllStocks"
                  title="清空所有库存"
                >
                  🗑️ 清空全部
                </button>
                <button 
                  type="button" 
                  class="stock-action-btn set-default-btn"
                  @click="setDefaultStocks"
                  title="设置默认库存(每个尺码10件)"
                >
                  📦 设置默认
                </button>
              </div>
              
              <div class="size-stock-grid">
                <div 
                  v-for="size in sizes" 
                  :key="size.sizeId || size.size_id"
                  class="size-stock-item"
                >
                  <!-- 库存状态指示器 -->
                  <div 
                    class="stock-status"
                    :class="getStockStatusClass(size.sizeId || size.size_id)"
                    :title="getStockStatusText(size.sizeId || size.size_id)"
                  ></div>
                  
                  <div class="size-info">
                    <label class="size-label">{{ size.shoeSize || size.size_name }}</label>
                    <span class="size-code">码</span>
                  </div>
                  <div class="stock-input-wrapper">
                    <input 
                      type="number" 
                      v-model.number="currentProduct.sizeStocks[size.sizeId || size.size_id]"
                      class="stock-input"
                      min="0"
                      max="9999"
                      placeholder="0"
                      @input="updateSizeStock(size.sizeId || size.size_id, $event.target.value)"
                      @focus="$event.target.select()"
                    >
                    <span class="stock-unit">件</span>
                  </div>
                </div>
              </div>
              
              <div class="stock-summary">
                <div class="summary-item">
                  <span class="summary-label">总库存</span>
                  <span class="summary-value">{{ getTotalStock() }}</span>
                </div>
                <div class="summary-item">
                  <span class="summary-label">配置尺码</span>
                  <span class="summary-value">{{ getConfiguredSizes() }}</span>
                </div>
                <div class="summary-item">
                  <span class="summary-label">平均库存</span>
                  <span class="summary-value">{{ getAverageStock() }}</span>
                </div>
                <div class="summary-item">
                  <span class="summary-label">库存状态</span>
                  <span class="summary-value" :style="{ color: getOverallStockColor() }">
                    {{ getOverallStockStatus() }}
                  </span>
                </div>
              </div>
            </div>

            <!-- 商品图片上传 -->
            <div class="form-section">
              <div class="section-header">
                <h4>商品图片</h4>
                <p>上传和管理商品图片</p>
              </div>
              
              <div v-if="!currentProduct.shoeId && !editingProduct" class="upload-placeholder">
                <p class="placeholder-text">
                  <i class="icon">📷</i>
                  请先保存商品信息，然后可以上传商品图片
                </p>
              </div>
              
              <ProductImageUpload 
                v-else
                :shoe-id="currentProduct.shoeId"
                @show-message="showToast"
              />
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" @click="closeModal">取消</button>
          <button type="button" class="btn btn-outline-primary" @click="saveProductOnly" :disabled="loading">
            {{ loading ? '保存中...' : '仅保存商品信息' }}
          </button>
          <button type="button" class="btn btn-primary" @click="saveProductWithStocks" :disabled="loading">
            {{ loading ? '保存中...' : '保存商品和库存' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import ProductImageUpload from './ProductImageUpload.vue'

export default {
  name: 'ProductList',
  components: {
    ProductImageUpload
  },
  data() {
    return {
      // 搜索和筛选
      searchQuery: '',
      statusFilter: '',
      brandFilter: '',
      
      // 分页
      currentPage: 1,
      pageSize: 12,
      
      // 数据
      products: [],
      brands: [],
      types: [],
      colors: [],
      sizes: [],
      
      // 状态
      loading: false,
      showModal: false,
      editingProduct: false,
      
      // 当前编辑的商品
      currentProduct: {
        name: '',
        serialNumber: '',
        brandId: '',
        typeId: '',
        colorId: '',
        price: '',
        discountPrice: '',
        gender: '',
        originPlace: '',
        launchDate: '',
        description: '',
        detailedInfo: '',
        itemPoints: 0,
        productImageUrl: '',
        status: '1',
        sizeStocks: {}
      }
    }
  },
  computed: {
    filteredProducts() {
      let filtered = this.products
      
      // 搜索过滤
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        filtered = filtered.filter(product => 
          (product.name && product.name.toLowerCase().includes(query)) ||
          (product.serialNumber && product.serialNumber.toLowerCase().includes(query)) ||
          (product.brandName && product.brandName.toLowerCase().includes(query)) ||
          (product.serial_number && product.serial_number.toLowerCase().includes(query)) ||
          (product.brand_name && product.brand_name.toLowerCase().includes(query)) ||
          (product.brand?.brand_name && product.brand.brand_name.toLowerCase().includes(query)) ||
          (product.type?.typeName && product.type.typeName.toLowerCase().includes(query)) ||
          (product.color?.colorName && product.color.colorName.toLowerCase().includes(query))
        )
      }
      
      // 状态过滤
      if (this.statusFilter !== '') {
        filtered = filtered.filter(product => 
          String(product.status) === String(this.statusFilter)
        )
      }
      
      // 品牌过滤
      if (this.brandFilter) {
        filtered = filtered.filter(product => 
          String(product.brandId || product.brand_id || product.brand?.brand_id) === String(this.brandFilter)
        )
      }
      
      return filtered
    },
    
    totalPages() {
      return Math.ceil(this.filteredProducts.length / this.pageSize)
    },
    
    paginatedProducts() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.filteredProducts.slice(start, end)
    },
    
    visiblePages() {
      const pages = []
      const total = this.totalPages
      const current = this.currentPage
      
      if (total <= 7) {
        for (let i = 1; i <= total; i++) {
          pages.push(i)
        }
      } else {
        if (current <= 4) {
          for (let i = 1; i <= 5; i++) {
            pages.push(i)
          }
          pages.push('...')
          pages.push(total)
        } else if (current >= total - 3) {
          pages.push(1)
          pages.push('...')
          for (let i = total - 4; i <= total; i++) {
            pages.push(i)
          }
        } else {
          pages.push(1)
          pages.push('...')
          for (let i = current - 1; i <= current + 1; i++) {
            pages.push(i)
          }
          pages.push('...')
          pages.push(total)
        }
      }
      
      return pages
    }
  },
  
  async mounted() {
    await this.loadData()
  },
  
  methods: {
    async loadData() {
      this.loading = true
      try {
        await Promise.all([
          this.loadProducts(),
          this.loadBrands(),
          this.loadTypes(),
          this.loadColors(),
          this.loadSizes()
        ])
      } catch (error) {
        console.error('加载数据失败:', error)
        this.$message?.error('加载数据失败，请刷新页面重试')
      } finally {
        this.loading = false
      }
    },

    async searchProducts() {
      this.currentPage = 1 // 重置到第一页
      await this.loadProducts()
    },
    
    async loadProducts() {
      try {
        console.log('开始加载商品数据...')
        // 使用分页查询接口
        const response = await axios.get('http://localhost:8083/api/v1/shoes/list/page', {
          params: {
            pageNum: 1,
            pageSize: 100, // 加载更多数据用于前端分页
            keyword: this.searchQuery || undefined
          }
        })
        console.log('商品API响应:', response.data)
        
        // 正确处理后端返回的数据结构
        if (response.data && response.data.code === 200) {
          // 分页接口返回的是PageInfo对象，数据在list字段中
          this.products = response.data.data?.list || response.data.data || []
        } else {
          this.products = response.data?.list || response.data || []
        }
        console.log('处理后的商品数据:', this.products)
        console.log('商品数量:', this.products.length)
        
        // 加载商品后自动加载库存信息
        if (this.products.length > 0) {
          await this.loadAllProductsStock()
        }
      } catch (error) {
        console.error('加载商品列表失败:', error)
        // 使用示例数据作为后备
        this.products = [
          {
            shoeId: 1001,
            serialNumber: 'NK-AJ1-BLK',
            name: 'Air Jordan 1 Retro High',
            brandId: 1,
            brandName: 'Nike',
            typeId: 1,
            typeName: '篮球鞋',
            colorId: 1,
            colorName: '黑红',
            price: 1299.00,
            discountPrice: 1199.00,
            gender: '男',
            originPlace: '越南',
            launchDate: '2025-01-15',
            description: '经典复刻篮球鞋',
            detailedInfo: 'Air Jordan 1 Retro High 经典黑红配色',
            productImageUrl: 'https://via.placeholder.com/300x300',
            salesVolume: 156,
            status: 1
          },
          {
            shoeId: 1002,
            serialNumber: 'NK-AJ1-WHT',
            name: 'Air Jordan 1 Retro High',
            brandId: 1,
            brandName: 'Nike',
            typeId: 1,
            typeName: '篮球鞋',
            colorId: 2,
            colorName: '白色',
            price: 1299.00,
            discountPrice: null,
            gender: '男女通用',
            originPlace: '越南',
            launchDate: '2025-01-15',
            description: '经典复刻篮球鞋',
            detailedInfo: 'Air Jordan 1 Retro High 经典白色配色',
            productImageUrl: 'https://via.placeholder.com/300x300',
            salesVolume: 89,
            status: 1
          },
          {
            shoeId: 1003,
            serialNumber: 'AD-UB-RED',
            name: 'Ultra Boost 5.0 DNA',
            brandId: 2,
            brandName: 'Adidas',
            typeId: 2,
            typeName: '跑步鞋',
            colorId: 3,
            colorName: '红色',
            price: 1399.00,
            discountPrice: 1199.00,
            gender: '女',
            originPlace: '印度尼西亚',
            launchDate: '2024-11-20',
            description: '舒适跑步鞋',
            detailedInfo: 'Ultra Boost 5.0 DNA 女款跑步鞋',
            productImageUrl: 'https://via.placeholder.com/300x300',
            salesVolume: 234,
            status: 1
          },
          {
            shoeId: 1004,
            serialNumber: 'LN-FG-BLU',
            name: '复古 16',
            brandId: 3,
            brandName: '李宁',
            typeId: 3,
            typeName: '休闲鞋',
            colorId: 4,
            colorName: '蓝白',
            price: 699.00,
            discountPrice: 399.00,
            gender: '男女通用',
            originPlace: '中国',
            launchDate: '2024-09-10',
            description: '复古休闲鞋',
            detailedInfo: '李宁复古16 经典蓝白配色',
            productImageUrl: 'https://via.placeholder.com/300x300',
            salesVolume: 67,
            status: 0
          },
          {
            shoeId: 1005,
            serialNumber: 'AT-CS-WHT',
            name: '安踏 霸道',
            brandId: 4,
            brandName: '安踏',
            typeId: 1,
            typeName: '篮球鞋',
            colorId: 2,
            colorName: '白色',
            price: 499.00,
            discountPrice: null,
            gender: '男',
            originPlace: '中国',
            launchDate: '2024-09-10',
            description: '实战篮球鞋',
            detailedInfo: '安踏霸道 实战篮球鞋',
            productImageUrl: 'https://via.placeholder.com/300x300',
            salesVolume: 123,
            status: 1
          },
          {
            shoeId: 1006,
            serialNumber: 'NK-AF1-WHT',
            name: 'Air Force 1 \'07',
            brandId: 1,
            brandName: 'Nike',
            typeId: 3,
            typeName: '休闲鞋',
            colorId: 2,
            colorName: '白色',
            price: 799.00,
            discountPrice: null,
            gender: '男女通用',
            originPlace: '越南',
            launchDate: '2023-01-01',
            description: '经典休闲鞋',
            detailedInfo: 'Air Force 1 \'07 经典白色',
            productImageUrl: 'https://via.placeholder.com/300x300',
            salesVolume: 445,
            status: 1
          }
        ]
      }
    },
    
    async loadBrands() {
      try {
        console.log('开始加载品牌数据...')
        const response = await axios.get('http://localhost:8083/api/brands')
        console.log('品牌API响应:', response.data)
        
        // 正确处理后端返回的数据结构
        if (response.data && response.data.code === 200) {
          this.brands = response.data.data || []
        } else {
          this.brands = response.data || []
        }
        console.log('处理后的品牌数据:', this.brands)
      } catch (error) {
        console.error('加载品牌列表失败:', error)
        console.error('错误详情:', error.response?.data || error.message)
        // 使用示例数据作为后备
        this.brands = [
          { brand_id: 1, brand_name: 'Nike', status: 1 },
          { brand_id: 2, brand_name: 'Adidas', status: 1 },
          { brand_id: 3, brand_name: '李宁', status: 1 },
          { brand_id: 4, brand_name: '安踏', status: 1 }
        ]
        console.log('使用后备品牌数据:', this.brands)
      }
    },
    
    async loadTypes() {
      try {
        console.log('开始加载分类数据...')
        const response = await axios.get('http://localhost:8083/api/types')
        console.log('分类API响应:', response.data)
        
        // 正确处理后端返回的数据结构
        if (response.data && response.data.code === 200) {
          this.types = response.data.data || []
        } else {
          this.types = response.data || []
        }
        console.log('处理后的分类数据:', this.types)
      } catch (error) {
        console.error('加载分类列表失败:', error)
        console.error('错误详情:', error.response?.data || error.message)
        // 使用示例数据作为后备
        this.types = [
          { type_id: 1, type_name: '篮球鞋', status: 1 },
          { type_id: 2, type_name: '跑步鞋', status: 1 },
          { type_id: 3, type_name: '休闲鞋', status: 1 },
          { type_id: 4, type_name: '足球鞋', status: 0 }
        ]
        console.log('使用后备分类数据:', this.types)
      }
    },
    
    async loadColors() {
      try {
        console.log('开始加载颜色数据...')
        const response = await axios.get('http://localhost:8083/api/colors')
        console.log('颜色API响应:', response.data)
        
        // 正确处理后端返回的数据结构
        if (response.data && response.data.code === 200) {
          this.colors = response.data.data || []
        } else {
          this.colors = response.data || []
        }
        console.log('处理后的颜色数据:', this.colors)
      } catch (error) {
        console.error('加载颜色列表失败:', error)
        console.error('错误详情:', error.response?.data || error.message)
        // 使用示例数据作为后备
        this.colors = [
          { color_id: 1, color_name: '黑红', status: 1 },
          { color_id: 2, color_name: '白色', status: 1 },
          { color_id: 3, color_name: '红色', status: 1 },
          { color_id: 4, color_name: '蓝白', status: 0 }
        ]
        console.log('使用后备颜色数据:', this.colors)
      }
    },

    async loadSizes() {
      try {
        console.log('开始加载尺码数据...')
        const response = await axios.get('http://localhost:8083/api/v1/sizes/list')
        console.log('尺码API响应:', response.data)
        
        // 正确处理后端返回的数据结构
        if (response.data && response.data.code === 200) {
          this.sizes = response.data.data || []
        } else {
          this.sizes = response.data || []
        }
        
        // 确保数据结构一致性
        this.sizes = this.sizes.map(size => ({
          sizeId: size.sizeId || size.size_id,
          size_id: size.size_id || size.sizeId,
          shoeSize: size.shoeSize || size.size_name || size.shoe_size,
          size_name: size.size_name || size.shoeSize || size.shoe_size,
          status: size.status
        }))
        
        console.log('处理后的尺码数据:', this.sizes)
      } catch (error) {
        console.error('加载尺码列表失败:', error)
        // 使用示例数据作为后备
        this.sizes = [
          { sizeId: 1, size_id: 1, shoeSize: '35', size_name: '35', status: '1' },
          { sizeId: 2, size_id: 2, shoeSize: '36', size_name: '36', status: '1' },
          { sizeId: 3, size_id: 3, shoeSize: '37', size_name: '37', status: '1' },
          { sizeId: 4, size_id: 4, shoeSize: '38', size_name: '38', status: '1' },
          { sizeId: 5, size_id: 5, shoeSize: '39', size_name: '39', status: '1' },
          { sizeId: 6, size_id: 6, shoeSize: '40', size_name: '40', status: '1' },
          { sizeId: 7, size_id: 7, shoeSize: '41', size_name: '41', status: '1' },
          { sizeId: 8, size_id: 8, shoeSize: '42', size_name: '42', status: '1' },
          { sizeId: 9, size_id: 9, shoeSize: '43', size_name: '43', status: '1' },
          { sizeId: 10, size_id: 10, shoeSize: '44', size_name: '44', status: '1' },
          { sizeId: 11, size_id: 11, shoeSize: '45', size_name: '45', status: '1' }
        ]
        console.log('使用后备尺码数据:', this.sizes)
      }
    },






    async addProduct() {
      this.editingProduct = false
      this.currentProduct = {
        name: '',
        serialNumber: '',
        brandId: '',
        typeId: '',
        colorId: '',
        price: '',
        discountPrice: '',
        gender: '',
        originPlace: '',
        launchDate: '',
        description: '',
        detailedInfo: '',
        itemPoints: 0,
        salesVolume: 0,
        productImageUrl: '',
        status: '1',
        sizeStocks: {}
      }
      // 在打开模态框前刷新选择栏数据
      await this.refreshSelectOptions()
      this.showModal = true
    },
    
    async editProduct(product) {
      this.editingProduct = true
      const productId = product.shoeId || product.shoe_id
      
      this.currentProduct = {
        shoeId: productId,
        name: product.name || '',
        serialNumber: product.serialNumber || product.serial_number || '',
        brandId: product.brandId || product.brand_id || product.brand?.brand_id || '',
        typeId: product.typeId || product.type_id || product.type?.typeId || '',
        colorId: product.colorId || product.color_id || product.color?.colorId || '',
        price: product.price || '',
        discountPrice: product.discountPrice || product.discount_price || '',
        gender: product.gender || '',
        originPlace: product.originPlace || product.origin_place || '',
        launchDate: product.launchDate || product.launch_date || '',
        description: product.description || '',
        detailedInfo: product.detailedInfo || product.detailed_info || '',
        itemPoints: product.itemPoints || product.item_points || 0,
        salesVolume: product.salesVolume || product.sales_volume || 0,
        productImageUrl: product.productImageUrl || product.product_image_url || '',
        status: String(product.status),
        sizeStocks: {}
      }
      
      // 在打开模态框前刷新选择栏数据和加载库存信息
      await Promise.all([
        this.refreshSelectOptions(),
        this.loadProductStockForEdit(productId)
      ])
      
      this.showModal = true
    },

    // 为编辑商品加载库存信息
    async loadProductStockForEdit(productId) {
      try {
        const sizeStocks = await this.loadProductStock(productId)
        this.currentProduct.sizeStocks = sizeStocks
        this.$forceUpdate() // 强制更新视图
      } catch (error) {
        console.error('加载商品库存失败:', error)
        this.currentProduct.sizeStocks = {}
      }
    },
    
    async saveProduct() {
      // 验证必填字段
      if (!this.currentProduct.price || this.currentProduct.price === '') {
        this.$message?.error('请输入商品价格')
        return false
      }
      
      this.loading = true
      try {
        const productData = {
          ...this.currentProduct,
          price: parseFloat(this.currentProduct.price) || 0,
          discountPrice: this.currentProduct.discountPrice ? parseFloat(this.currentProduct.discountPrice) : null,
          itemPoints: parseInt(this.currentProduct.itemPoints) || 0,
          salesVolume: parseInt(this.currentProduct.salesVolume) || 0,
          status: parseInt(this.currentProduct.status)
        }
        
        let response
        if (this.editingProduct) {
          response = await axios.post('http://localhost:8080/api/v1/shoes/update', productData)
        } else {
          response = await axios.post('http://localhost:8080/api/v1/shoes/add', productData)
          // 新增商品时，需要获取返回的商品ID
          if (response.data && response.data.data && response.data.data.shoeId) {
            this.currentProduct.shoeId = response.data.data.shoeId
          }
        }
        
        return true
      } catch (error) {
        console.error('保存商品失败:', error)
        this.$message?.error('保存商品失败，请重试')
        return false
      } finally {
        this.loading = false
      }
    },

    // 仅保存商品信息（不包含库存）
    async saveProductOnly() {
      const result = await this.saveProduct()
      if (result) {
        this.$message?.success(this.editingProduct ? '商品更新成功' : '商品添加成功')
        // 保存后刷新商品列表和选择栏数据
        await Promise.all([
          this.loadProducts(),
          this.refreshSelectOptions()
        ])
        this.closeModal()
      }
    },

    // 刷新选择栏数据的方法
    async refreshSelectOptions() {
      try {
        await Promise.all([
          this.loadBrands(),
          this.loadTypes(),
          this.loadColors()
        ])
      } catch (error) {
        console.error('刷新选择栏数据失败:', error)
      }
    },
    
    async toggleProductStatus(product) {
      try {
        const newStatus = (product.status === '1' || product.status === 1) ? 'INACTIVE' : 'ACTIVE'
        const productId = product.shoeId || product.shoe_id
        
        await axios.post(`http://localhost:8080/api/v1/shoes/status/${productId}`, null, {
          params: { status: newStatus }
        })
        
        // 更新本地数据
        const index = this.products.findIndex(p => 
          (p.shoeId || p.shoe_id) === productId
        )
        if (index !== -1) {
          this.products[index].status = newStatus === 'ACTIVE' ? 1 : 0
        }
        
        this.$message?.success(`商品已${newStatus === 'ACTIVE' ? '上架' : '下架'}`)
      } catch (error) {
        console.error('更新商品状态失败:', error)
        this.$message?.error('更新商品状态失败，请重试')
      }
    },
    
    async deleteProduct(product) {
      if (!confirm('确定要删除这个商品吗？此操作不可恢复。')) {
        return
      }
      
      try {
        await axios.post(`http://localhost:8080/api/v1/shoes/delete/${product.shoeId || product.shoe_id}`)
        // 删除后刷新商品列表和选择栏数据
        await Promise.all([
          this.loadProducts(),
          this.refreshSelectOptions()
        ])
        this.$message?.success('商品删除成功')
      } catch (error) {
        console.error('删除商品失败:', error)
        this.$message?.error('删除商品失败，请重试')
      }
    },
    
    closeModal() {
      this.showModal = false
      this.editingProduct = false
      this.currentProduct = {
        name: '',
        serialNumber: '',
        brandId: '',
        typeId: '',
        colorId: '',
        price: '',
        discountPrice: '',
        gender: '',
        originPlace: '',
        launchDate: '',
        description: '',
        detailedInfo: '',
        salesVolume: 0,
        productImageUrl: '',
        status: '1',
        sizeStocks: {}
      }
    },
    
    handleImageError(event) {
      event.target.src = '/default-product.png'
    },

    // 尺码库存相关方法
    updateSizeStock(sizeId, value) {
      if (!this.currentProduct.sizeStocks) {
        this.currentProduct.sizeStocks = {}
      }
      const stockValue = parseInt(value) || 0
      this.currentProduct.sizeStocks[sizeId] = stockValue
      
      // 实时更新显示
      this.$forceUpdate()
    },

    getTotalStock() {
      if (!this.currentProduct.sizeStocks) {
        return 0
      }
      return Object.values(this.currentProduct.sizeStocks).reduce((total, stock) => {
        return total + (parseInt(stock) || 0)
      }, 0)
    },

    getConfiguredSizes() {
      if (!this.currentProduct.sizeStocks) {
        return 0
      }
      return Object.values(this.currentProduct.sizeStocks).filter(stock => 
        parseInt(stock) > 0
      ).length
    },

    getAverageStock() {
      const configuredSizes = this.getConfiguredSizes()
      if (configuredSizes === 0) return 0
      return Math.round(this.getTotalStock() / configuredSizes)
    },

    getStockStatusClass(sizeId) {
      const stock = parseInt(this.currentProduct.sizeStocks?.[sizeId]) || 0
      if (stock === 0) return ''
      if (stock <= 5) return 'low-stock'
      return 'in-stock'
    },

    getStockStatusText(sizeId) {
      const stock = parseInt(this.currentProduct.sizeStocks?.[sizeId]) || 0
      if (stock === 0) return '无库存'
      if (stock <= 5) return '库存不足'
      return '库存充足'
    },

    getOverallStockStatus() {
      const total = this.getTotalStock()
      const configured = this.getConfiguredSizes()
      
      if (total === 0) return '无库存'
      if (configured === 0) return '未配置'
      if (total <= 20) return '库存不足'
      if (total <= 100) return '库存正常'
      return '库存充足'
    },

    getOverallStockColor() {
      const total = this.getTotalStock()
      if (total === 0) return '#ef4444'
      if (total <= 20) return '#f59e0b'
      if (total <= 100) return '#3b82f6'
      return '#10b981'
    },

    // 批量操作方法
    clearAllStocks() {
      if (confirm('确定要清空所有尺码的库存吗？')) {
        this.currentProduct.sizeStocks = {}
        this.sizes.forEach(size => {
          this.currentProduct.sizeStocks[size.sizeId || size.size_id] = 0
        })
        this.$message?.success('已清空所有库存')
      }
    },

    setDefaultStocks() {
      if (confirm('确定要为所有尺码设置默认库存(10件)吗？')) {
        if (!this.currentProduct.sizeStocks) {
          this.currentProduct.sizeStocks = {}
        }
        this.sizes.forEach(size => {
          this.currentProduct.sizeStocks[size.sizeId || size.size_id] = 10
        })
        this.$message?.success('已设置默认库存')
      }
    },

    // 验证库存配置
    validateStockConfiguration() {
      const totalStock = this.getTotalStock()
      const configuredSizes = this.getConfiguredSizes()
      
      if (totalStock === 0) {
        this.$message?.warning('建议为商品配置库存数量')
        return false
      }
      
      if (configuredSizes < 3) {
        this.$message?.warning('建议至少配置3个尺码的库存')
        return false
      }
      
      return true
    },

    // 加载商品库存信息
    async loadProductStock(productId) {
      try {
        const response = await axios.get(`http://localhost:8080/api/v1/stock/product/${productId}`)
        if (response.data && response.data.code === 200) {
          const stockList = response.data.data || []
          // 将库存数据转换为前端需要的格式
          const sizeStocks = {}
          stockList.forEach(stock => {
            sizeStocks[stock.sizeId] = stock.stockQuantity
          })
          return sizeStocks
        }
        return {}
      } catch (error) {
        console.error('加载库存信息失败:', error)
        return {}
      }
    },

    // 保存库存信息
    async saveStockData(productId, sizeStocks) {
      try {
        const stockPromises = []
        
        // 遍历所有尺码库存
        for (const [sizeId, quantity] of Object.entries(sizeStocks)) {
          if (quantity > 0) {
            // 检查库存是否已存在
            const existingStock = await this.checkStockExists(productId, parseInt(sizeId))
            
            const stockData = {
              shoeId: productId,
              sizeId: parseInt(sizeId),
              stockQuantity: parseInt(quantity)
            }
            
            if (existingStock) {
              // 更新现有库存
              stockPromises.push(axios.post('http://localhost:8080/api/v1/stock/update', stockData))
            } else {
              // 添加新库存
              stockPromises.push(axios.post('http://localhost:8080/api/v1/stock/add', stockData))
            }
          }
        }
        
        // 执行所有库存操作
        await Promise.all(stockPromises)
        console.log('库存信息保存成功')
        return true
      } catch (error) {
        console.error('保存库存信息失败:', error)
        this.$message?.error('保存库存信息失败')
        return false
      }
    },

    // 检查库存是否存在
    async checkStockExists(productId, sizeId) {
      try {
        const response = await axios.get(`http://localhost:8080/api/v1/stock/product/${productId}/size/${sizeId}`)
        return response.data && response.data.code === 200 && response.data.data
      } catch (error) {
        return false
      }
    },

    async saveProductWithStocks() {
      // 验证库存配置
      this.validateStockConfiguration()
      
      try {
        // 先保存商品信息
        const productSaved = await this.saveProduct()
        
        if (productSaved && this.currentProduct.shoeId) {
          // 保存库存信息
          await this.saveStockData(this.currentProduct.shoeId, this.currentProduct.sizeStocks)
          this.$message?.success('商品和库存信息保存成功')
          
          // 保存后刷新商品列表和选择栏数据
          await Promise.all([
            this.loadProducts(),
            this.refreshSelectOptions()
          ])
          this.closeModal()
        }
      } catch (error) {
        console.error('保存失败:', error)
        this.$message?.error('保存失败，请重试')
      }
    },

    // 获取商品库存状态类名
    getProductStockClass(product) {
      if (!product.totalStock && product.totalStock !== 0) {
        return 'stock-unknown'
      }
      if (product.totalStock === 0) return 'stock-empty'
      if (product.totalStock <= 20) return 'stock-low'
      if (product.totalStock <= 100) return 'stock-normal'
      return 'stock-high'
    },

    // 获取商品库存状态文本
    getProductStockText(product) {
      if (!product.totalStock && product.totalStock !== 0) {
        return '未加载'
      }
      if (product.totalStock === 0) return '无库存'
      if (product.totalStock <= 20) return `库存不足 (${product.totalStock})`
      if (product.totalStock <= 100) return `库存正常 (${product.totalStock})`
      return `库存充足 (${product.totalStock})`
    },

    // 刷新单个商品的库存信息
    async refreshProductStock(product) {
      const productId = product.shoeId || product.shoe_id
      if (!productId) return
      
      try {
        const sizeStocks = await this.loadProductStock(productId)
        const totalStock = Object.values(sizeStocks).reduce((total, stock) => {
          return total + (parseInt(stock) || 0)
        }, 0)
        
        // 更新商品的库存信息
        const productIndex = this.products.findIndex(p => 
          (p.shoeId || p.shoe_id) === productId
        )
        if (productIndex !== -1) {
          this.products[productIndex].totalStock = totalStock
          this.products[productIndex].sizeStocks = sizeStocks
        }
        
        this.$forceUpdate()
      } catch (error) {
        console.error('刷新库存失败:', error)
      }
    },

    // 批量加载所有商品的库存信息
    async loadAllProductsStock() {
      try {
        const stockPromises = this.products.map(async (product) => {
          const productId = product.shoeId || product.shoe_id
          if (productId) {
            const sizeStocks = await this.loadProductStock(productId)
            const totalStock = Object.values(sizeStocks).reduce((total, stock) => {
              return total + (parseInt(stock) || 0)
            }, 0)
            product.totalStock = totalStock
            product.sizeStocks = sizeStocks
          }
        })
        
        await Promise.all(stockPromises)
        this.$forceUpdate()
      } catch (error) {
        console.error('批量加载库存失败:', error)
      }
    },

    // 显示提示消息
    showToast(message, type = 'info') {
      const toast = document.createElement('div')
      toast.className = `toast toast-${type}`
      toast.textContent = message
      
      Object.assign(toast.style, {
        position: 'fixed',
        top: '20px',
        right: '20px',
        padding: '12px 20px',
        borderRadius: '6px',
        color: 'white',
        fontSize: '14px',
        fontWeight: '500',
        zIndex: '10000',
        opacity: '0',
        transform: 'translateX(100%)',
        transition: 'all 0.3s ease',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)'
      })

      const colors = {
        success: '#10b981',
        error: '#ef4444',
        warning: '#f59e0b',
        info: '#3b82f6'
      }
      
      toast.style.background = colors[type] || colors.info
      document.body.appendChild(toast)
      
      setTimeout(() => {
        toast.style.opacity = '1'
        toast.style.transform = 'translateX(0)'
      }, 100)
      
      setTimeout(() => {
        toast.style.opacity = '0'
        toast.style.transform = 'translateX(100%)'
        setTimeout(() => {
          if (document.body.contains(toast)) {
            document.body.removeChild(toast)
          }
        }, 300)
      }, 3000)
    }

  }
}
</script>

<style scoped>
/* 页面头部样式 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 2rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.page-header h2 {
  margin: 0 0 0.5rem 0;
  font-size: 2rem;
  font-weight: 700;
}

.page-header p {
  margin: 0;
  opacity: 0.9;
  font-size: 1.1rem;
}

/* 内容包装器 */
.content-wrapper {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  
}

/* 搜索和操作栏样式 */
.search-action-bar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-box {
  position: relative;
  flex: 1;
  min-width: 300px;
}

.search-input {
  width: 100%;
  padding: 0.75rem 3rem 0.75rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.875rem;
  transition: all 0.3s ease;
  background: white;
}

.search-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.search-btn:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.filter-controls {
  display: flex;
  gap: 1rem;
}

.filter-select {
  padding: 0.75rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.875rem;
  background: white;
  transition: all 0.3s ease;
  min-width: 150px;
}

.filter-select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.create-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.create-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

/* 加载状态样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  color: #6b7280;
}

.loading-spinner {
  width: 3rem;
  height: 3rem;
  border: 3px solid #e5e7eb;
  border-top: 3px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: #6b7280;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
}

.empty-state p {
  font-size: 1rem;
  margin-bottom: 2rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* 商品网格样式 */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
  padding: 1.5rem;
}

.product-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #667eea;
}

.product-card.inactive {
  opacity: 0.7;
}

.card-content {
  padding: 1.5rem;
}

.product-info {
  margin-bottom: 1rem;
}

.product-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.product-id {
  font-family: 'Monaco', 'Menlo', monospace;
  font-weight: 600;
}

.product-status {
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-active {
  background: #d1fae5;
  color: #065f46;
}

.status-inactive {
  background: #fee2e2;
  color: #991b1b;
}

.product-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}

.detail-row .label {
  color: #6b7280;
  font-weight: 500;
}

.detail-row .value {
  color: #1f2937;
  font-weight: 600;
  text-align: right;
  max-width: 60%;
  
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

.action-btn {
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
}

.action-btn.edit {
  background: #dbeafe;
  color: #1d4ed8;
}

.action-btn.edit:hover {
  background: #bfdbfe;
  transform: scale(1.1);
}

.action-btn.toggle {
  background: #fef3c7;
  color: #d97706;
}

.action-btn.toggle:hover {
  background: #fde68a;
  transform: scale(1.1);
}

.action-btn.delete {
  background: #fee2e2;
  color: #dc2626;
}

.action-btn.delete:hover {
  background: #fecaca;
  transform: scale(1.1);
}

/* 分页 */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  padding: 1rem 0;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pagination button {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #d1d5db;
  background: white;
  color: #374151;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination button:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
  transform: translateY(-1px);
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination button.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.pagination .page-info {
  margin: 0 1rem;
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
}

/* 模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(30, 41, 59, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  backdrop-filter: blur(12px);
  animation: overlayFadeIn 0.3s ease-out;
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(12px);
  }
}

.modal-content {
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  border-radius: 20px;
  width: 90%;
  max-width: 650px;
  max-height: 90vh;
  
  box-shadow: 
    0 32px 64px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4);
  border-radius: 20px 20px 0 0;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-30px) rotateX(10deg);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0) rotateX(0deg);
  }
}

.modal-header {
  padding: 2rem 2rem 1rem;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  margin-bottom: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 2rem;
  right: 2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
}

.modal-header h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #1e293b, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.modal-header h3::before {
  content: '🛍️';
  font-size: 1.25rem;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 12px;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.refresh-btn,
.close-btn {
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  
}

.refresh-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.refresh-btn:hover:not(:disabled) {
  transform: translateY(-2px) rotate(180deg);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
  background: linear-gradient(135deg, #059669, #047857);
}

.refresh-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  animation: spin 1s linear infinite;
}

.close-btn {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.close-btn:hover {
  transform: translateY(-2px) rotate(90deg);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.close-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.close-btn:hover::before {
  left: 100%;
}

.modal-body {
  padding: 2rem;
  max-height: calc(90vh - 200px);
  overflow-y: auto;
  background: linear-gradient(145deg, #ffffff, #f8fafc);
}

.modal-body::-webkit-scrollbar {
  width: 6px;
}

.modal-body::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
  position: relative;
}

.form-group label {
  display: block;
  margin-bottom: 0.75rem;
  font-weight: 600;
  color: #1e293b;
  font-size: 0.9rem;
  position: relative;
  padding-left: 1rem;
}

.form-group label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 2px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 1rem 1.25rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.9rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 
    0 0 0 4px rgba(59, 130, 246, 0.1),
    0 4px 12px rgba(59, 130, 246, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
  background: #ffffff;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: #94a3b8;
  transform: translateY(-1px);
}

.form-textarea {
  resize: vertical;
  min-height: 6rem;
  font-family: inherit;
}

.modal-footer {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding: 2rem;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  margin-top: 0;
  position: relative;
}

.modal-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 2rem;
  right: 2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
}

.btn {
  padding: 1rem 2rem;
  border: none;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn:hover::before {
  left: 100%;
}

.btn-secondary {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  color: #475569;
  border: 2px solid #cbd5e1;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-secondary::after {
  content: '✕';
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  transform: translateY(-2px);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-color: #94a3b8;
}

.btn-secondary:hover::after {
  opacity: 1;
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: white;
  border: 2px solid transparent;
  box-shadow: 
    0 4px 12px rgba(59, 130, 246, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-primary::after {
  content: '✓';
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  transform: translateY(-2px);
  box-shadow: 
    0 8px 20px rgba(59, 130, 246, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-primary:hover:not(:disabled)::after {
  opacity: 1;
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  background: linear-gradient(135deg, #94a3b8, #64748b);
  box-shadow: none;
}

.btn-primary:disabled::after {
  content: '⏳';
  opacity: 1;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 尺码库存配置样式 */
.size-stock-section {
  margin-top: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-header {
  margin-bottom: 1.5rem;
  text-align: center;
}

.section-header h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.section-header h4::before {
  content: '📦';
  font-size: 1.1rem;
}

.section-header p {
  margin: 0;
  color: #64748b;
  font-size: 0.875rem;
}

.size-stock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.size-stock-item {
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
  transition: all 0.3s ease;
  position: relative;
  
}

.size-stock-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.size-stock-item:hover {
  border-color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.size-stock-item:hover::before {
  transform: scaleX(1);
}

.size-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.size-label {
  font-weight: 600;
  color: #1e293b;
  font-size: 1rem;
}

.size-code {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.stock-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.stock-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.875rem;
  transition: all 0.3s ease;
  text-align: center;
  font-weight: 500;
}

.stock-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: #fafbff;
}

.stock-input:valid:not(:placeholder-shown) {
  border-color: #10b981;
  background: #f0fdf4;
}

.stock-unit {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 500;
  min-width: 20px;
}

.stock-summary {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.summary-label {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.summary-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 库存状态指示器 */
.stock-status {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
}

.stock-status.in-stock {
  background: #10b981;
}

.stock-status.low-stock {
  background: #f59e0b;
}

/* 批量操作按钮 */
.stock-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  justify-content: center;
}

.stock-action-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.clear-all-btn {
  background: #fee2e2;
  color: #dc2626;
}

.clear-all-btn:hover {
  background: #fecaca;
  transform: translateY(-1px);
}

.set-default-btn {
  background: #dbeafe;
  color: #2563eb;
}

.set-default-btn:hover {
  background: #bfdbfe;
  transform: translateY(-1px);
}

/* 快速设置下拉菜单 */
.quick-set-dropdown {
  position: relative;
}

.quick-set-btn {
  background: #dcfce7;
  color: #16a34a;
}

.quick-set-btn:hover {
  background: #bbf7d0;
  transform: translateY(-1px);
}

.quick-set-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  padding: 0.5rem;
  margin-top: 0.25rem;
  min-width: 200px;
}

.quick-set-option {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  color: #374151;
}

.quick-set-option:hover {
  background: #f3f4f6;
  color: #1f2937;
}

.custom-set {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  border-top: 1px solid #e5e7eb;
  margin-top: 0.5rem;
}

.custom-input {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.875rem;
}

.custom-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.custom-set-btn {
  padding: 0.5rem 1rem;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.custom-set-btn:hover {
  background: #5a67d8;
}

/* 库存信息样式 */
.stock-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stock-text {
  font-weight: 500;
}

.stock-refresh-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  font-size: 0.75rem;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.stock-refresh-btn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
}

/* 库存状态颜色 */
.stock-unknown .stock-text {
  color: #6b7280;
}

.stock-empty .stock-text {
  color: #ef4444;
  font-weight: 600;
}

.stock-low .stock-text {
  color: #f59e0b;
  font-weight: 600;
}

.stock-normal .stock-text {
  color: #3b82f6;
  font-weight: 500;
}

.stock-high .stock-text {
  color: #10b981;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .product-list {
    padding: 16px;
  }
  
  .page-header {
    padding: 24px;
    margin-bottom: 24px;
  }
  
  .page-header h2 {
    font-size: 24px;
  }
  
  .search-action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .search-box {
    min-width: auto;
  }
  
  .filter-controls {
    flex-wrap: wrap;
  }
  
  .products-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }
  
  .pagination-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .pagination-controls {
    flex-direction: column;
    gap: 12px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .modal-content {
    margin: 10px;
    max-height: calc(100vh - 20px);
    border-radius: 16px;
    max-width: calc(100vw - 20px);
  }
  
  .modal-header {
    padding: 1.5rem 1.5rem 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .modal-header h3 {
    font-size: 1.25rem;
  }
  
  .modal-header h3::before {
    font-size: 1rem;
    padding: 0.375rem;
  }
  
  .header-actions {
    align-self: flex-end;
    margin-left: 0;
  }
  
  .refresh-btn,
  .close-btn {
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
  }
  
  .modal-body {
    padding: 1.5rem;
  }
  
  .modal-footer {
    padding: 1.5rem;
    flex-direction: column-reverse;
    gap: 0.75rem;
  }
  
  .btn {
    padding: 0.875rem 1.5rem;
    font-size: 0.875rem;
    width: 100%;
  }
  
  .form-group label {
    font-size: 0.875rem;
  }
  
  .form-input,
  .form-select,
  .form-textarea {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
  }
  
  /* 库存功能移动端优化 */
  .size-stock-section {
    padding: 1rem;
    margin-top: 1.5rem;
  }
  
  .size-stock-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .size-stock-item {
    padding: 0.75rem;
  }
  
  .stock-summary {
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
  }
  
  .summary-item {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
  
  .summary-value {
    font-size: 1rem;
  }
  
  .stock-actions {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .stock-action-btn {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }

}

@media (max-width: 480px) {
  .page-numbers {
    flex-wrap: wrap;
  }
  
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* 图片上传占位符样式 */
.image-upload-placeholder {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  margin-top: 1rem;
  color: #64748b;
  font-size: 0.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.image-upload-placeholder:hover {
  border-color: #94a3b8;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.image-upload-placeholder .icon {
  font-size: 2rem;
  opacity: 0.6;
  margin-bottom: 0.5rem;
}

.image-upload-placeholder .text {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.image-upload-placeholder .hint {
  font-size: 0.75rem;
  opacity: 0.8;
}
</style>